<template>
	<view>
		<view>示例</view>
		<view className="small-canvas">
			<canvas canvas-id="canvas" id="canvas"   @mousedown="startMouse" @mousemove="moveMouse" @mouseup="endMouse"></canvas>
			
		</view>
		<video id="video" width="400" height="300"  autoPlay playsInline></video>
		<!-- <view class="videofilter"  @click="startRecord()">开始录制</view>
		<view class="videofilter"  @click="downLoad()">停止并下载</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stream: '',
				myCanvas: '',
				myVideo: '',
				ctx:'',
				start:false,
				recordedBlobs:''
			}
		},
		onLoad() {
			this.startCaptureCanvas();
		},
		methods: {
			async startCaptureCanvas(){
				const stream = await navigator.mediaDevices.getUserMedia({video:true});
				this.myVideo = document.querySelector('video');
				this.myCanvas = document.querySelector('canvas');
				console.log("myCanvar=", this.myCanvas);
				this.stream = this.myCanvas.captureStream(10);
				console.log("this.stream =", this.stream );
				this.myVideo.srcObject = this.stream;
				
				this.drawLine();
			},
			drawLine(){
				this.ctx = uni.createCanvasContext('canvas');
				this.ctx.setFillStyle('red');
				this.ctx.setLineCap('round');
				this.ctx.lineWidth = 6;
				this.ctx.strokeStyle = "#FF0000";
				
			},
			startMouse(e){
				//this.ctx.beginPath();
				this.ctx.setFillStyle('red');
				
				this.ctx.moveTo(event.offsetX,event.offsetY);
				//this.ctx.stroke();
				this.start = true;
				console.log("startMouse",this.start);
			},
			moveMouse(e){
				console.log("moveMouse",this.start);
				if(this.start){
					console.log("moveMouse=",e);
					this.ctx.setFillStyle('red');
					this.ctx.lineTo(event.offsetX,event.offsetY);
					
				}
			},
			endMouse(e){
				this.start = false;
				this.ctx.setFillStyle('red');
				this.ctx.stroke();
				this.ctx.draw(true);
				console.log("endMouse");
			},
			startRecord(){
				try {
					mediaRecorder = new MediaRecorder(window.stream, { mineType: 'video/webm' });
				} catch (e) {
					console.log("MediaRecorder:", e);
					return;
				}
		
				mediaRecorder.onstop = (event) => {
					console.log('Recorder stopped:', event);
					console.log('Recorder blobs:', recordedBlobs);
				}
		
				mediaRecorder.ondataavailable = this.handleDataAvailable;
				mediaRecorder.start(10);
			}
		}
	}
</script>

<style lang="scss">
	//小画布样式 
	.small-canvas {
		//background-color: #ccc;
		width: 300px;
		// height: 240px;
		border-color: #ccc;
		border-width: 1px;
		border-style: solid;
	}

	//小视频样式
	.small-video {
		background: #222;
		margin: 0 0 20px 0;
		width: 400px;
		height: 300px;
	}
</style>
